<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>同时使用过度和动画</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="../animate.css">
	<style>
		.fade-enter, .fade-leave {
			opacity: 0;
		}
		.fade-enter-active, .leave-enter-active {
			transition: opacity 3s;
		}
	</style>
</head>
<body>
	<div id="app">
		<transition 
					:duration="{enter: 5000, leave: 10000}"
					name="fade"
					appear
					enter-active-class="animated swing fade-enter-active" 
					leave-active-class="animated shake leave-enter-active"
					appear-active-class="animated swing">
			<div v-if="show">Hello Vue</div>
		</transition>		
		<button @click="handleClick">change</button>
	</div>
	
	<script>

		new Vue({
			el: "#app",
			data: {
				show: true
			},
			methods: {
				handleClick: function() {
					this.show = !this.show
				}
			}
		})
	</script>
</body>
</html>